<template>
    <transition name="fade">
        <div :class="['cvu-loading', `cvu-loading-${theme}`]" v-show="show">
            <!-- 默认风格 -->
            <div class="cvu-loading-body" v-if="theme=='default'"
                :style="{ background: background, zIndex: zIndex }"
            >
                <div class="cvu-loading-inner" :style="{borderTopColor: color}">
                    <span class="before" :style="{borderTopColor: color}"></span>
                    <span class="after" :style="{borderTopColor: color}"></span>
                </div>
                <div class="cvu-loading-content" :style="{color: color}">{{ content }}</div>
            </div>
            <!-- 进度条风格 -->
            <div class="cvu-loading-body" v-if="theme=='progress'"
                :style="{ background: background, zIndex: zIndex }"
            >
                <div class="cvu-loading-inner">
                    <div class="cvu-loading-inner-percent" v-if="!disProgressText" :style="progressTextStyles">{{ percent }}%</div>
                    <div class="cvu-loading-inner-buffered" :style="progressStyles"></div>
                </div>
                <div class="cvu-loading-content" :style="{color: color}">{{ content }}</div>
            </div>
            <!-- 顶部百分比风格 -->
            <div class="cvu-loading-body" v-if="theme=='percent'">
                <div class="cvu-loading-inner" :style="percentStyles"></div>
            </div>
            <!-- 方块旋转风格 -->
            <div class="cvu-loading-body" v-if="theme=='box'"
                :style="{ background: background, zIndex: zIndex }"
            >
                <div class="cvu-loading-inner">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="cvu-loading-content" :style="{color: color}">{{ content }}</div>
            </div>
            <!-- icon旋转风格 -->
            <div class="cvu-loading-body" v-if="theme=='icon'"
                :style="{ background: background, zIndex: zIndex }"
            >
                <div class="cvu-loading-inner">
                    <Icon :type="icon" :style="{color: color}" />
                </div>
                <div class="cvu-loading-content" :style="{color: color}">{{ content }}</div>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    name: 'cvu-loading',
    props: {
        // 主题
        theme: {
            type: String,
            default: 'default'
        },
        // icon图标
        icon: {
            type: String,
            default: 'ios-loading'
        },
        // 高度
        height: Number,
        // 背景色
        background: String,
        // 文字颜色
        color: String,
        // 进度条颜色
        progressColor: String,
        // 是否隐藏进度值
        disProgressText: Boolean,
        // 百分比颜色
        percentColor: String,
        // 失败颜色
        errorColor: {
            type: String,
            default: '#FF0000'
        },
        // 层级
        zIndex: Number,
        // 提示文字
        content: {
            type: String,
            default: '加载中，请耐心等待'
        },
        // 隐藏时的持续时间，单位 ms
        duration: {
            type: Number,
            default: 800
        }
    },
    data() {
        return {
            show: true,
            status: 'success',
            percent: 0
        }
    },
    computed: {
        // 进度条样式
        progressStyles() {
            let style = {
                width: `${this.percent}%`,
                height: `${this.height}px`,
                background: this.status == 'error' ? this.errorColor : this.progressColor
            }
            return style
        },
        // 进度条文字样式
        progressTextStyles() {
            let style = {
                left: `${this.percent - 3}%`,
                top: `-${this.height + 20}px`,
                color: this.status == 'error' ? this.errorColor : this.progressColor
            }
            return style
        },
        // 百分比样式
        percentStyles() {
            let style = {
                width: `${this.percent}%`,
                height: `${this.height}px`,
                zIndex: this.zIndex,
                background: this.status == 'error' ? this.errorColor : this.percentColor
            }
            return style
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../../style/_index.scss';
.cvu-loading{
    // 默认风格
    &.cvu-loading-default{
        .cvu-loading-body{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: $primary-blue;
            .cvu-loading-inner{
                position: relative;
                left: 50%;
                top: 50%;
                width: 120px;
                height: 120px;
                margin: -75px 0 0 -63px;
                border-radius: 50%;
                border: 3px solid transparent; /* COLOR 1 */
                border-top-color: #FFF;
                animation: loading 2s linear infinite;
                z-index: 1001;
                .before, .after {
                    position: absolute;
                    border-radius: 50%;
                    border: 3px solid transparent; /* COLOR 2 */
                    border-top-color: #FFF;
                }
                .before{top: 5px; left: 5px; right: 5px; bottom: 5px; animation: loading 3s linear infinite;}
                .after{top: 15px; left: 15px; right: 15px; bottom: 15px;animation: loading 1.5s linear infinite;}
                @-webkit-keyframes loading { 
                    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
                    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
                }
                @keyframes loading {
                    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
                    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
                }
            }
            .cvu-loading-content{
                position: relative;
                top: calc(50% + 20px);
                left: 50%;
                transform: translate(-50%, 0);
                display: inline-block;
                width: auto;
                line-height: 24px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                color: #FFF;
            }
        }
    }
    // 进度条风格
    &.cvu-loading-progress{
        .cvu-loading-body{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: $primary-blue;
            .cvu-loading-inner{
                position: relative;
                left: 50%;
                top: 50%;
                width: 60%;
                margin: -10px 0 0 -30%;
                padding: 2px 5px;
                box-sizing: border-box;
                border-radius: 50px;
                background: rgba($color: #FFF, $alpha: .3);
                .cvu-loading-inner-buffered{
                    width: 0;
                    height: 10px;
                    background: #FFF;
                    border-radius: 50px;
                    transition: all .2s;
                }
                .cvu-loading-inner-percent{
                    position: absolute;
                    top: -20px;
                    white-space: nowrap;
                    transition: all .2s;
                    font-size: 14px;
                    color: #FFF;
                }
            }
            .cvu-loading-content{
                position: relative;
                top: calc(50% + 20px);
                left: 50%;
                transform: translate(-50%, 0);
                display: inline-block;
                width: auto;
                line-height: 24px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                color: #FFF;
            }
        }
    }
    // 进度条风格
    &.cvu-loading-percent{
        .cvu-loading-body{
            .cvu-loading-inner{
                position: fixed;
                top: 0;
                left: 0;
                z-index: 9999;
                width: 100vw;
                height: 2px;
                box-sizing: border-box;
                border-radius: 50px;
                background: $primary-blue;
                transition: all .2s;
            }
        }
    }
    // 方块旋转风格
    &.cvu-loading-box{
        .cvu-loading-body{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: rgba($color: #FFF, $alpha: .6);
            .cvu-loading-inner{
                position: relative;
                left: 50%;
                top: 50%;
                width: 42px;
                height: 42px;
                margin: -21px 0 0 -21px;
                border-radius: 50%;
                -webkit-animation: loading 2s linear infinite;
                animation: loading 2s linear infinite;
                z-index: 1001;
                span{
                    width:20px;
                    height:20px;
                    position:absolute;
                    background:red;
                    display:block;
                    -webkit-animation: loading_span 1s infinite linear;
                    animation: loading_span 1s infinite linear;
                    &:nth-child(1){
                        background:#2ecc71;
                    }
                    &:nth-child(2){
                        left: 22px;
                        background:#9b59b6;
                        -webkit-animation-delay: .2s;
                        animation-delay: .2s;
                    }
                    &:nth-child(3){
                        top: 22px;
                        background:#3498db;
                        -webkit-animation-delay: .4s;
                        animation-delay: .4s;
                    }
                    &:nth-child(4){
                        top: 22px;
                        left: 22px;
                        background:#f1c40f;
                        -webkit-animation-delay: .6s;
                        animation-delay: .6s;
                    }
                }
                @-webkit-keyframes loading {
                    from {-webkit-transform: rotate(0deg);}
                    to {-webkit-transform: rotate(360deg);}
                }
                @keyframes loading {
                    from {-webkit-transform: rotate(0deg);}
                    to {-webkit-transform: rotate(360deg);}
                }
                @-webkit-keyframes loading_span {
                    0% { -webkit-transform:scale(1); }
                    50% { -webkit-transform:scale(0.5); }
                    100% { -webkit-transform:scale(1); }
                }
                @keyframes loading_span {
                    0% { -webkit-transform:scale(1); }
                    50% { -webkit-transform:scale(0.5); }
                    100% { -webkit-transform:scale(1); }
                }
            }
            .cvu-loading-content{
                position: relative;
                top: calc(50% + 20px);
                left: 50%;
                transform: translate(-50%, 0);
                display: inline-block;
                width: auto;
                line-height: 24px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                color: $primary-blue;
            }
        }
    }
    // icon旋转风格
    &.cvu-loading-icon{
        .cvu-loading-body{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: rgba($color: #FFF, $alpha: .6);
            .cvu-loading-inner{
                position: relative;
                left: 50%;
                top: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 42px;
                height: 42px;
                margin: -21px 0 0 -21px;
                border-radius: 50%;
                -webkit-animation: loading 2s linear infinite;
                animation: loading 2s linear infinite;
                z-index: 1001;
                /deep/.ivu-icon{
                    font-size: 36px;
                    color: $primary-blue;
                }
                @-webkit-keyframes loading {
                    from {-webkit-transform: rotate(0deg);}
                    to {-webkit-transform: rotate(360deg);}
                }
                @keyframes loading {
                    from {-webkit-transform: rotate(0deg);}
                    to {-webkit-transform: rotate(360deg);}
                }
            }
            .cvu-loading-content{
                position: relative;
                top: 52%;
                left: 50%;
                transform: translate(-50%, 0);
                display: inline-block;
                width: auto;
                line-height: 24px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                color: $primary-blue;
            }
        }
    }
}
</style>